<ion-header>
  <ion-navbar>
    <ion-title>登录</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div class="logo">
    <img src="assets/img/common/logo2.png" alt="Ionic logo">
  </div>
  <form #loginForm="ngForm" novalidate>
    <ion-list class="login-list">
      <!--             <ion-item>
                <ion-label fixed>用户名2:</ion-label>
                <ion-input [(ngModel)]="login.username2" name="username2" type="text" #username2="ngModel" spellcheck="false" autocapitalize="off" placeholder="请输入用户名2" (focusin)="focusInInput('username2')" (focusout)="focusOutInput('username2')">
                </ion-input>
                <button ion-button clear item-right *ngIf="login.username2&&isEditusername2" (click)="cleanInput('username2')">
                    <ion-icon name="close-circle"></ion-icon>
                </button>
            </ion-item> -->
      <ion-item>
        <ion-label fixed>用户名:</ion-label>
        <ion-input [(ngModel)]="login.username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off"
          required placeholder="请输入用户名" (focusin)="focusInInput('username')" (focusout)="focusOutInput('username')" (ngModelChange)="usernameChange()">
        </ion-input>
        <button ion-button clear item-right *ngIf="login.username&&isEditusername" (click)="cleanInput('username')">
                    <ion-icon name="close-circle"></ion-icon>
                </button>
      </ion-item>
      <p ion-text [hidden]="username.valid || submitted == false" color="danger" padding-left>
        请输入用户名
      </p>
      <ion-item>
        <ion-label fixed>密&nbsp;&nbsp;&nbsp;&nbsp;码:</ion-label>
        <ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" required placeholder="请输入密码"
          (focusin)="focusInInput('password')" (focusout)="focusOutInput('password')">
        </ion-input>
        <button ion-button clear item-right *ngIf="login.password&&isEditpassword" (click)="cleanInput('password')">
                    <ion-icon name="close-circle"></ion-icon>
                </button>
      </ion-item>
      <p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
        请输入密码
      </p>
      <div *ngIf='isNeedCaptcha'>
        <ion-item>
          <ion-label fixed>验证码:</ion-label>
          <ion-input [(ngModel)]="login.code" name="code" type="text" #code="ngModel" required placeholder="请输入验证码">
          </ion-input>
          <button ion-button clear item-right (click)="getCode()" *ngIf="isShowGetCodeBtn">
            获取验证码
        </button>
          <button ion-button clear item-right *ngIf="!isShowGetCodeBtn">
                {{getCodeTime}}s
        </button>
        </ion-item>
        <p ion-text [hidden]="code.valid || submitted == false" color="danger" padding-left>
          请输入验证码
        </p>
      </div>
    </ion-list>
    <ion-row responsive-sm class="submit-button-content">
      <ion-col padding>
        <button ion-button (click)="onLogin(loginForm)" type="submit" block>登录</button>
      </ion-col>
    </ion-row>
  </form>
</ion-content>
